<template>
  <el-dialog v-model="visible" :title="material && material.id ? '编辑物料' : '新增物料'" width="480px" @close="reset">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="90px" style="margin-top: 10px;">
      <el-form-item label="物料编码" prop="code">
        <el-input v-model="form.code" maxlength="64" :disabled="!!material?.id" />
      </el-form-item>
      <el-form-item label="物料名称" prop="name">
        <el-input v-model="form.name" maxlength="128" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-input v-model="form.type" maxlength="64" />
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="form.unit" maxlength="32" />
      </el-form-item>
      <el-form-item label="规格型号" prop="spec">
        <el-input v-model="form.spec" maxlength="128" />
      </el-form-item>
      <el-form-item label="生产厂家" prop="manufacturer">
        <el-input v-model="form.manufacturer" maxlength="128" />
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input-number v-model="form.stock" :min="0" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input-number v-model="form.price" :min="0" :step="0.01" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" maxlength="255" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { ElMessage } from 'element-plus';
import api from '../api/material';

const props = defineProps({
  modelValue: Boolean,
  material: Object
});
const emit = defineEmits(['update:modelValue', 'refresh']);

const visible = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
});

const formRef = ref();
const form = ref({
  code: '',
  name: '',
  type: '',
  unit: '',
  spec: '',
  manufacturer: '',
  stock: 0,
  price: 0,
  remark: ''
});

const rules = {
  code: [{ required: true, message: '请输入物料编码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入物料名称', trigger: 'blur' }]
};

/**
 * 监听物料数据变化
 * @param {Object} val - 新的物料数据
 * 当传入新的物料数据时，更新表单字段
 * 如果是编辑模式，复制物料数据到表单；否则重置表单
 */
watch(() => props.material, (val) => {
  if (val) {
    form.value = { ...val };
  } else {
    reset();
  }
}, { immediate: true });

/**
 * 重置表单数据
 * 将所有表单字段重置为初始值
 */
function reset() {
  form.value = {
    code: '', name: '', type: '', unit: '', spec: '', manufacturer: '', stock: 0, price: 0, remark: ''
  };
}

/**
 * 提交表单数据
 * 1. 先进行表单验证
 * 2. 根据是否有ID决定调用新增或更新API
 * 3. 成功后会关闭对话框并触发刷新事件
 */
function submit() {
  formRef.value.validate(valid => {
    if (!valid) return;
    if (props.material && props.material.id) {
      api.update(props.material.id, form.value).then(() => {
        ElMessage.success('修改成功');
        visible.value = false;
        emit('refresh');
      });
    } else {
      api.create(form.value).then(() => {
        ElMessage.success('新增成功');
        visible.value = false;
        emit('refresh');
      });
    }
  });
}
</script> 